<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		 Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>GeoPortal - Mecklenburg County GIS</title>
    <meta name="description" content="GeoPortal - One stop shopping for location information.">
    <meta name="author" content="Tobin Bradley">
    <!-- Allow all robots -->
    <meta content="all" name="robots" />
    <!-- turn off IE image toolbar -->
    <meta content="no" http-equiv="imagetoolbar" />
    <!-- Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- These two lines only for use with Leaflet backend - remove if not needed -->
    <link rel="stylesheet" href="js/libs/leaflet/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="js/libs/leaflet/leaflet.ie.css" /><![endif]-->
    <!-- jQuery UI CSS -->
    <link type="text/css" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css"
        rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
    <!-- CSS: implied media="all" -->
    <link rel="stylesheet" href="css/style.css">
    <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects
		Note this modernizr build only contains HTML5 shim/iepp, modernizr.load, add css classes, and
		geolocation api. You can build your own with additional features at http://www.modernizr.com/ -->
    <script src="js/libs/modernizr.custom.js"></script>
            <style type="text/css">
            .ui-accordion-header
            {
                text-align: left;
            }
            .ui-tabs, .ui-tabs .ui-tabs-panel
            {
                padding: 0;
                margin: 0;
                border: 0;
            }
            .ui-widget-header
            {
                padding: 0;
                margin: 0;
                border: 0;
                border-top: 1px;
            }
            .ui-accordion .ui-accordion-header
            {
                margin: 0;
            }
        </style>
</head>
<body>
    <div id="container">
        <header>
            <!-- Header logo -->            
            <div id="logo" class="logo alignleft" style="text-align:center;width:200px;">
                <span style="font:2.5em bolder; ">Logo</span>
            </div>
            <div id="searchdiv" class="screen-only">
				<input id="searchinput" class="ui-corner-all inset" x-webkit-speech speech placeholder="Start here!" />
                <p><a href="javascript:void(0)">Help</a></p>
			</div>
			<div id="toolbar" class="screen-only ui-widget-header hidden"  style="">
				<div id="mapcontrols">
					<input type="radio" id="navigate" name="mapcontrol-button" value="none" checked="checked" /><label for="navigate">Navigate</label>
					<input type="radio" id="measure" name="mapcontrol-button" value="measure" /><label for="measure">Measure</label>
					<input type="radio" id="identify" name="mapcontrol-button" value="identify" /><label for="identify">Identify</label>
				</div>
				<div id="toolbar-text-output" class="alignright textright">
					<span id="toolbar-area"></span>
					<span id="toolbar-length"></span>
					<br />
					<span id="toolbar-coords"></span>
				</div>
			</div>
         <div id="menubar">
            <ul class="sf-menu">
			<li class="current">
				<a href="#a">menu item1</a>
				<ul>
					<li>
						<a href="#">menu item that is quite long</a>
					</li>
					<li class="current">
						<a href="#">menu item</a>
					</li>
					<li>
						<a href="#">menu item</a>
					</li>
					<li>
						<a href="#">menu item</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">menu item2</a>
				<ul>
					<li>
						<a href="#">menu item</a>
					</li>
					<li>
						<a href="#">menu item</a>
					</li>
					<li>
						<a href="#">menu item</a>
					</li>
					<li>
						<a href="#">menu item</a>
					</li>
					<li>
						<a href="#">menu item</a>
					</li>
				</ul>
			</li>
		</ul>
            </div>
    </header>
        <!-- side bar -->
        <aside>

			<div id="left-tabs">
              <ul>
                <li><a href="#Navigate">Navigate</a> </li>      
                <li><a href="#Measure">Measure</a> </li>
                  <li><a href="#Identify">Identify</a> </li>
              </ul>
              <div id="Navigate">
            <!-- Data Accordion -->
            <div id="accordion-data" class="accordion hidden accordion-item">
                <h3 id="WELCOME"><a href="#">Welcome</a></h3>
                <div>
                    <p>Use the search bar to begin (<a href="javascript:void(0)" id="searchoptions">options</a>). For assistance, check out our <a href="http://www.youtube.com/watch?v=MNX2p1su3K0" target="_blank">video tutorial</a>. 
                    </p>
                    <p>GeoPortal is an advanced web mapping system created by Mecklenburg County GIS. Its mission is to be an easy to use "portal" into
                    Mecklenburg County's data and services.</p> <p>This site is powered by <a href="http://en.wikipedia.org/wiki/Open_source" target="_blank" >free and open source software</a>.
                    The source code for this site is released under the <a href="http://en.wikipedia.org/wiki/MIT_X11" target="_blank">MIT free software license</a> and can be downloaded <a href="http://fuzzytolerance.info/projects/" target="_blank">here</a>.</p>
                    
                    <p class="gpslocation hidden"><img src="img/target-icon.png" alt="Where am I?" /><a href="javascript:void(0)" id="gogpslocation">Follow My Location</a></p>
                    
                    <div>
                        <h5>Search Results</h5>
                        <span class="selectedLocation">No records selected.</span>
                    </div>
                </div>
                <h3 id="TRANSPORTATION"><a href="#">Transportation</a></h3>
                <div>
                    <div class="selectedLocation">No property currently selected.</div>
                    <div id="bus-stops" class="selected-data hidden">
                        <table class="datatable">
                            <caption>10 Nearest CATS Bus Stops</caption>
                            <thead>
                                <tr>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default">Bus Stop</th>
                                    <th class="ui-state-default">Routes</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                       </table>
                    </div>
                    <div id="park-and-rides" class="selected-data hidden">
                        <table class="datatable">
                            <caption>3 Nearest CATS Park & Ride</caption>
                            <thead>
                                <tr>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default">Bus Stop</th>
                                    <th class="ui-state-default">Address</th>
                                    <th class="ui-state-default">Routes</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="light-rail-stops" class="selected-data hidden">
                        <table class="datatable">
                            <caption>3 Nearest CATS Lynx Stops</caption>
                            <thead>
                                <tr>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default">Bus Stop</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <h3 id="SERVICES"><a href="#">Services</a></h3>
                <div>
                    <div class="selectedLocation">No property currently selected.</div>
                    <div id="parks" class="selected-data hidden">
                        <table class="datatable">
                            <caption>3 Nearest Parks</caption>
                            <thead>
                                 <tr>
                                      <th class="ui-state-default"></th>
                                      <th class="ui-state-default"></th>
                                      <th class="ui-state-default">Park</th>
                                      <th class="ui-state-default">Address</th>
                                 </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="libraries" class="selected-data hidden">
                        <table class="datatable">
                            <caption>5 Nearest Libraries</caption>
                            <thead>
                                <tr>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default">Library</th>
                                    <th class="ui-state-default">Address</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="fire-stations" class="selected-data hidden">
                        <table class="datatable">
                            <caption>3 Nearest Fire Stations</caption>
                            <thead>
                                <tr>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default"></th>
                                    <th class="ui-state-default">Fire Station</th>
                                    <th class="ui-state-default">Type</th>
                                    <th class="ui-state-default">Address</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                
                <h3 id="MAPCONTROLS"><a href="#">Map Controls</a></h3>
                <div>
                    <h5>Map Layers</h5>
                    <div id="layerswitcher"></div>
                    <h5 class="opacityControl">Layer Opacity</h5>
                    <select id="opacitydll" class="opacityControl"></select>
                    <div id="opacitySlider" class="opacityControl"></div>
                    <span id="layerOpacity" class="alignright opacityControl">Layer Opacity: 50%</span>
                </div>
                <h3 id="LEGEND"><a href="#">Legend</a></h3>
                <div>
                    <img src="img/legend.png" />
                </div>
                    
            </div>
           </div>
              <div id="Measure">
            <!-- Data Accordion -->
            <div id="Div2" class="accordion hidden accordion-item">
               
                <h3 id="H1"><a href="#">Legend</a></h3>
                <div>
                    <img src="img/legend.png" />
                </div>
                    
            </div>
           </div>
           <div id="Identify">
            <!-- Data Accordion -->
            <div id="Div1" class="accordion hidden accordion-item">
               
                <h3 id="H2"><a href="#">Legend</a></h3>
                <div>
                    <img src="img/legend.png" />
                </div>
                    
            </div>
           </div>
         </div>
		</aside>
        <!-- Map -->
        <div id="map-container" class="ui-widget-content ui-corner-all boxshadow">
            <div id="map" class="ui-corner-bottom">
            </div>
        </div>
        <footer>
			<div class="alignright smallfont" id="footer-text">
				<a href="http://code.google.com/p/geoportal/" title="GeoPortal">Project Page</a>
			</div>
		</footer>
    </div>
    <!--! end of #container -->
    <!-- JavaScript at the bottom for fast page loading -->
    <!-- Grab Google CDN's jQuery and jQuery UI -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
    <script src="js/hoverIntent.js" type="text/javascript"></script>
     <script src="js/supersubs.js" type="text/javascript"></script>
    <script src="js/superfish.js" type="text/javascript"></script>
    <script src="js/jquery.bgiframe.min.js" type="text/javascript"></script>
    <!-- scripts concatenated and minified via ant build script-->
    <script src="js/demo-plugins.js"></script>
    <script src="js/demo-script.js"></script>
    
    <!-- end scripts-->
</body>
</html>
